<template>
    <div class="watermark-container">
      <canvas id="myCanvas" class="watermark-canvas" width="368" height="368" v-if="!imgData"></canvas>
      <button id="saveBtn" v-if="!imgData">保存图片</button>
      <!-- <canvas id="canvasContent" class="watermark-canvas"></canvas>
      <button @click="generateImage">生成图片</button>
      <image
        :src="imgData"
        mode="scaleToFill"
      /> -->
    </div>
  </template>

  <script>
  
  import html2canvas from 'html2canvas'
  export default {
    name: "Watermark",
    props: {
      text: {
        type: String,
        default: "watermark"
      }
    },
    data(){
      return{
        imgData:''
      }
    },
    mounted() {
      // let link = document.createElement('canvas')
      // link.ref = 'canvas'
      // link.id = 'myCanvas'
      // link.class = 'watermark-canvas'
      const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const { width, height } = canvas.getBoundingClientRect();
        const fontSize = 18;
  
        canvas.width = width;
        canvas.height = height;
  
        ctx.font = `${fontSize}px Arial`;
        ctx.fillStyle = "rgba(200, 200, 200, 0.3)";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
  
        const x = width / 2;
        const y = height / 2;
        const text = this.text;
  
        ctx.rotate((-20 * Math.PI) / 180);
        ctx.fillText(text, x, y);
        
        const dataURL = canvas.toDataURL();
// 将 canvas 转成图片并保存
const saveBtn = document.getElementById('saveBtn');
saveBtn.addEventListener('click', () => {
  const dataURL = canvas.toDataURL();
  const img = new Image();
  img.src = dataURL;
  this.$emit('getWatermarkUrl',dataURL)
  //console.log(dataURL)
  // const link = document.createElement('a');
  // link.download = 'my-image.png';
  // link.href = dataURL;

  // document.body.appendChild(link);
  // link.click();
  // document.body.removeChild(link);
});
saveBtn.click()
      // this.init();
      
    },
    methods: {
      init() {
        
        // const canvas = this.$refs.canvas;
        const canvas = document.getElementById('canvasContent')
        const ctx = canvas.getContext("2d");
        
        const dataURL = canvas.toDataURL();
        //console.log(dataURL);
      },
      generateImage(){
        var dataURL = document.getElementById('canvasContent').toDataURL()
        const img = new Image();
        this.imgData = img.src = dataURL;
        //console.log(this.imgData)
      }
    }
  };
  </script>
  
  <style>
  .watermark-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -99;
  }
  
  .watermark-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    pointer-events: none;
  }
  
  .watermark-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
    color: 
  rgba(200, 200, 200, 0.5);
    font-size: 14px;
    pointer-events: none;
  }
  </style>